/* style.css - Nested Flexbox Layout with Black/White Theme */

/* Basic Reset & Global Styles */

/* For all links on your page */
a {
    text-decoration: none; /* This is the key property */
	
}
a:visited {
    color: #fff; /* Keep visited links white */
}
/* Or more specifically for your navigation links */
header nav ul li a,
footer a,
.container-3 .footer-link { /* Assuming you want to remove underline from these specific links */
    text-decoration: none;
    /* Keep other styles like color, padding, etc. */
}

/* If you want to remove it from links within your article content or contact info */
.article p a, /* For links inside paragraphs within articles */
.contact-info a { /* For links in the contact info section */
    text-decoration: none;
    /* Keep other styles like color */
}

/* Example: if you had a specific class for links you want underlined on hover */
.underline-on-hover:hover {
    text-decoration: underline;
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #000; /* Black background */
    color: #fff; /* White text */
    min-height: 100vh;
    display: flex;
    flex-direction: column; /* Stack header, main containers, footer vertically */
    box-sizing: border-box;
}

/* Header Styles (Top of the page, outside main containers) */
header {
    background-color: #000;
    color: #fff;
    padding: 1em 20px;
    border-bottom: 1px solid #fff; /* White border below header */
    display: flex; /* Make header a flex container */
    align-items: center; /* Vertically center items */
    justify-content: space-between; /* Space out logo and nav */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    box-sizing: border-box;
}

header h1 {
    margin: 0;
    padding: 0; /* No vertical padding here, handled by header padding */
    flex-grow: 1; /* Allow h1 to take available space */
    text-align: left; /* Align title to left */
    font-size: 1.8em; /* Adjust font size */
}

header .top-logo { /* Renamed from .logo to avoid conflict with article-specific logo */
/*    border: 1px solid #fff; /* White border for logo box */
    padding: 5px 10px;
    margin-right: 20px; /* Space between logo and h1/nav */
    white-space: nowrap; /* Prevent "Logo" from wrapping */
}

/* Top Navigation (Home Page link) */
header nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; /* Make nav ul a flex container */
    flex-wrap: wrap; /* Allow nav items to wrap */
    justify-content: flex-end; /* Align nav items to the right */
}
header nav ul li {
    margin-left: 10px; /* Space between nav items */
}
header nav ul li a {
    color: #fff;
    text-decoration: none;
    padding: 8px 15px; /* Padding inside the nav link boxes */
    display: block; /* Make the entire padding area clickable */
    border: 1px solid #fff; /* White border for nav items */
    transition: background-color 0.3s ease, color 0.3s ease;
    white-space: nowrap; /* Prevent nav text from wrapping */
}
header nav ul li a:hover {
    background-color: #333; /* Darker background on hover */
    color: #fff;
}
/* Current page highlighting for nav links (add this class to the active link in HTML) */
.nav-active {
    background-color: #555; /* Slightly different background for active link */
    color: #fff;
}


/* Outer Layer Container (Container 1 - formerly "pink") */
.container-1 {
/*    border: 2px solid #fff;  White border */
    width: 90%; /* Adjust as needed */
    max-width: 1200px; /* Maximum width of the layout */
    min-height: 70vh; /* Minimum height for content area */
    display: flex; /* Flex container for container-2 and aside */
    padding: 15px; /* Padding around the inner containers */
    box-sizing: border-box;
    margin: 20px auto; /* Center horizontally, space from header/footer */
    flex-grow: 1; /* Allow this container to grow vertically */
}

/* Left Side Container (Container 2 - formerly "green") */
.container-2 {
    border: 2px solid #fff; /* White border */
    flex-grow: 1; /* Takes up available space */
    display: flex;
    flex-direction: column; /* Stack Logo, Articles, Container 3 vertically */
    padding: 15px;
    box-sizing: border-box;
    margin-right: 15px; /* Space between green and sidebar */
}

/* Content within Container 2 */
.container-2 .logo-placeholder { /* For the "Logo" box within Container 2 */
 /*   border: 1px solid #fff;
    padding: 10px;
    margin-bottom: 15px; /* Space before articles */
    text-align: left;
    font-weight: bold;
}

/* Articles Section within Container 2 */
.articles-section {
    display: flex;
    flex-direction: column; /* Stack articles vertically */
    gap: 10px; /* Space between articles */
    margin-bottom: 15px; /* Space before Container 3 (footer area) */
    flex-grow: 1; /* Allow articles section to grow and push footer down */
}

.article { /* Individual article boxes */
 /*   border: 1px solid #fff; /* White border */
    padding: 20px;
    text-align: left;
    box-sizing: border-box;
    flex-basis: auto; /* Allow articles to size based on content */
    flex-shrink: 0; /* Don't shrink by default */
}

.article h3 { /* Styles for injected article content headings */
    text-align: center;
    margin-top: 0;
    margin-bottom: 15px;
    color: #fff;
}
.article p { /* Styles for injected article content paragraphs */
    line-height: 1.6;
    margin-bottom: 10px;
}

/* Container 3 (Orange - Footer Area within Container 2) */
.container-3 {
 /*    border: 1px solid #fff; /* White border */
    padding: 10px;
    display: flex;
    justify-content: center; /* Center footer links horizontally */
    gap: 10px; /* Space between footer links */
    flex-wrap: wrap; /* Allow footer links to wrap */
}

.container-3 .footer-link { /* Specific style for footer links in container 3 */
    border: 1px solid #fff; /* White border */
    padding: 8px 15px;
    text-decoration: none;
    color: #fff;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.container-3 .footer-link:hover {
    background-color: #333;
}


/* Sidebar (Right Side of Container 1) */
aside {
    border: 2px solid #fff; /* White border */
    width: 250px; /* Fixed width for sidebar */
    padding: 15px;
    text-align: center;
    box-sizing: border-box;
    flex-shrink: 0; /* Prevent sidebar from shrinking below its content */
    margin-left: 15px; /* Space between main content and sidebar */
}

/* Basic Styling for Content inside Sidebar */
aside p {
    margin: 10px 0;
}
aside {
    /* ... existing styles for aside ... */
    display: flex; /* Make aside a flex container */
    flex-direction: column; /* Stack content vertically */
    align-items: center; /* Center items horizontally within aside */
}

aside h3 {
    margin-top: 0;
    margin-bottom: 20px;
    color: #fff;
}

aside ul {
    list-style: none; /* Remove bullet points */
    padding: 0;
    margin: 0;
    width: 100%; /* Make ul take full width of aside */
    text-align: center; /* Center list items */
}

aside ul li {
    margin-bottom: 10px; /* Space between links */
}

aside ul li a {
    display: block; /* Make the whole area clickable */
    padding: 8px 15px;
/*     border: 1px solid #fff; /* White border for sidebar links */
    color: #fff;
    text-decoration: none; /* Remove underline */
    transition: background-color 0.3s ease, color 0.3s ease;
    white-space: nowrap; /* Prevent text wrapping */
    overflow: hidden; /* Hide overflow if text is too long */
    text-overflow: ellipsis; /* Add ellipsis for long text */
}

aside ul li a:hover {
    background-color: #333;
    color: #fff;
}



/* Footer Styles (Bottom of the page, outside main containers) */
footer {
    text-align: center;
    padding: 20px;
    background-color: #000;
    color: #fff;
    margin-top: auto; /* Push footer to the bottom */
  /*   border-top: 1px solid #fff; /* White border above footer */
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    box-sizing: border-box;
}

footer a {
    border: 1px solid #fff; /* White border for footer links */
    padding: 8px 15px;
    text-decoration: none;
    color: #fff;
    transition: background-color 0.3s ease, color 0.3s ease;
}
footer a:hover {
    background-color: #333;
}


/* --- Styles for About Us and Contact Us Pages --- */
/* These pages will use a simpler layout within container-1 */
.single-column-container { /* This replaces .container and .about-contact-container */
    border: 2px solid #fff; /* White border */
    width: 100%; /* Takes full width of container-1 */
    padding: 20px;
    box-sizing: border-box;
    text-align: left; /* Align text within these pages */
}
.single-column-container h2,
.single-column-container h3 {
    text-align: center; /* Center headings */
    margin-bottom: 25px;
    color: #fff;
}
.single-column-container ul {
    list-style: disc inside;
    padding-left: 20px;
    margin-bottom: 20px;
}
.single-column-container ul li {
    margin-bottom: 8px;
}

/* Contact Info Styles */
.contact-info {
    margin-bottom: 30px;
    text-align: center;
}
.contact-info p {
    margin-bottom: 10px;
}
.contact-info a {
    color: #fff;
    text-decoration: underline;
}


/* Responsive Adjustments */
@media (max-width: 768px) {
    header {
        flex-direction: column;
        align-items: flex-start;
        padding: 1em 10px; /* Adjust padding for small screens */
    }
    header h1 {
        text-align: center;
        width: 100%;
        margin-bottom: 10px;
    }
    header .top-logo {
        margin-right: 0;
        margin-bottom: 10px;
    }
    header nav ul {
        justify-content: center;
        width: 100%;
    }
    header nav ul li {
        margin: 5px;
    }

    .container-1 {
        flex-direction: column; /* Stack container-2 and sidebar vertically */
        width: 95%; /* Make outer container wider on small screens */
        padding: 10px;
		border: none;
    }

    .container-2 {
        margin-right: 0; /* Remove horizontal margin */
        margin-bottom: 15px; /* Add vertical margin */
		border: none;
    }

    aside {
        width: 100%; /* Sidebar takes full width */
        margin-left: 0; /* Remove horizontal margin */
    }

    .articles-section {
        margin-bottom: 10px; /* Adjust space before footer in articles section */
    }

    .single-column-container {
        padding: 15px;
    }
}